<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.7/css/layui.css">
</head>

<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md8 layui-col-md-offset2">
            <button id="add_btn" type="button" class="layui-btn" style="display: block; margin-left: auto">
                <i class="layui-icon">&#xe608;</i> 添加新联系人
            </button>

            {% for p in data %}
                <div class="layui-card">
                    <div class="layui-card-header">
                        {{ p.name }}
                    </div>
                    <div class="layui-card-body">
                        <div>{{ p.phone }}</div>
                        <div>{{ p.email }}</div>
                    </div>
                </div>
            {% endfor %}
        </div>
    </div>
</div>

<form id="layer" class="layui-form" hidden>
    <div class="layui-col-md10" style="padding-top: 1rem">
        <div class="layui-form-item">
            <label class="layui-form-label">姓名</label>
            <div class="layui-input-block">
                <input name="name" type="text" class="layui-input" placeholder="请输入联系人姓名">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话</label>
            <div class="layui-input-block">
                <input name="phone" type="text" class="layui-input" placeholder="请输入联系人电话">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱</label>
            <div class="layui-input-block">
                <input name="email" type="text" class="layui-input" placeholder="请输入联系人邮箱">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn">提交</button>
                <button type="reset" class="layui-btn">重置</button>
            </div>
        </div>
    </div>
</form>

<script src="https://www.layuicdn.com/layui-v2.5.7/layui.js"></script>
<script src="http://cdn.bootcdn.net/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
    layui.use(['layer', 'form'], function () {
        let layer = layui.layer
        //let form = layui.form

        $('#add_btn').click(function () {
            layer.open({
                type: 1,
                content: $('#layer'),
                area: '500px'
            })
        })
    })
</script>
</body>

</html>